<template>
    <div class="app">
<!--   头部导航nav     -->
        <header id="header" class="mui-bar mui-bar-nav">
            <h1 class="mui-title">小黄狗</h1>
            <a class="mui-icon mui-icon-bars mui-pull-right"></a>
            <a @click.prevent="backPge" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        </header>

      <transition mode="out-in">
        <router-view></router-view>
      </transition>

<!--   底部导航栏nav-->
        <nav class="mui-bar mui-bar-tab">
            <router-link class="mui-tab-item" to="/home">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </router-link>

            <router-link class="mui-tab-item mui-active" to="/email">
                <span class="mui-icon mui-icon-email"><span style="font-size: 30px;margin-left: -60px" class="mui-badge">9</span></span>
                <span class="mui-tab-label">消息</span>
            </router-link>

            <router-link class="mui-tab-item" to="/search">
                <span class="mui-icon mui-icon-search"></span>
                <span  class="mui-tab-label">搜索</span>
            </router-link>

            <router-link class="mui-tab-item" to="/user">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">我的</span>
            </router-link>
        </nav>

    </div>
</template>

<script>
    // import mui from './lib/mui/js/mui.min.js';
    export default {
      data(){
        return{

        }
      },
      methods: {
        backPge() {
          console.log("返回了")
          window.history.go(-1);
        }
      }

    }

</script>
<style scoped>
    *{
        margin: 0;
        padding: 0;

    }
    a{
      text-decoration: none;
    }
    .v-enter,.v-leave-to{
      opacity: 0;
      transform: translateX(30px);
    }
    .v-enter-active,.v-leave-active{
      transition:all 0.1s;
    }

    .app{
        width: 1080px;
        height: 1920px;
    }
    .app>#header{
        height: 132px;
        width:1080px;
        background-color:#F7F6EE;
    }
    .app>#header>h1{
        font-size:50px;
        line-height: 132px;
        color:#FFC66E;
    }
    .app>#header>.mui-icon.mui-pull-left{
       font-size: 100px;


    }
    .app>#header>.mui-icon.mui-pull-right{
        font-size: 100px;

    }
    #slider img{
        width:1080px;
        height: 900px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;

    }
    .mui-bar {
        width: 1080px;
        height: 146px;

    }
    .mui-bar.mui-bar-tab span.mui-tab-label {
        font-size: 40px;
        height: 30px;
        /*border: 1px solid red;*/
        padding: 30px 0;
    }
    .mui-tab-item span.mui-icon{
        font-size:80px;
        margin-top: -20px;
        margin-left: -50px;
        color: black;
    }

    .mui-content{
        width: 1080px;
    }
    .mui-table-view-cell{
        /*border: 1px solid red;*/

    }
    .mui-table-view-cell.mui-media span.mui-icon{
        margin: 10px ;
        font-size: 80px;


    }
    .mui-table-view-cell.mui-media div.mui-media-body{
        font-size: 40px;
         padding: 40px 0;

    }


</style>